<template>
  <div v-loading="containerLoading" class="app-container">
    <div class="filter-container">
      <el-select v-model="userSelDepa" size="medium" placeholder="选择系部" class="name-search" style="width: 130px" clearable @change="getList">
        <el-option
          v-for="item in config.departmentOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>

      <el-select
        v-model="activityGrade"
        placeholder="年级"
        clearable
        size="medium"
        style="width: 130px"
        class="filter-item"
        @change="getList">
        <el-option
          v-for="item in config.activityGradeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>

      <el-input v-model="searchContext" placeholder="请根据条件输入内容" class="name-search" size="medium" @change="getList">
        <el-select slot="prepend" v-model="searchAction" placeholder="请选择条件" @change="getList">
          <el-option key="1" value="user_id" label="学号"/>
          <el-option key="2" value="user_name" label="姓名"/>
          <el-option key="3" value="bmmc" label="班级"/>
        </el-select>
      </el-input>

      <el-cascader
        :options="yearTermOptions"
        v-model="activityTerm"
        clearable
        size="medium"
        class="filter-item"
        style="margin-left:10px"
        placeholder="请选择学期导出"/>
      <el-button
        v-if="$store.getters.menuList.xf_export_score"
        type="primary"
        class="filter-item"
        size="medium"
        icon="el-icon-download"
        @click="exportCreditExcel">
        导出学分
      </el-button>
    </div>
    <el-table :data="studentList" size="medium" border stripe highlight-current-row>
      <el-table-column prop="user_id" label="学号" align="center"/>
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          <router-link :to="{ name: 'CreditDetail', params: { id: scope.row.user_id }}" class="link-type pointer">{{ scope.row.user_name }}</router-link>
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.sex | formatSex }}</span>
        </template>
      </el-table-column>
      <el-table-column label="系部" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.depa | formatDepa }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="grade" label="年级" align="center"/>
      <el-table-column prop="bmmc" label="班级" align="center"/>
    </el-table>
    <pagination :total="pageTotal" :page.sync="page" :limit="10" layout="prev, pager, next, jumper" class="hidden-xs-only" @pagination="getList"/>
    <pagination :total="pageTotal" :page.sync="page" :limit="10" small layout="prev, pager, next" class="hidden-sm-and-up" @pagination="getList"/>
  </div>
</template>

<script>
import config from '@/utils/config.js'
import Pagination from '@/components/Pagination'
import { getCreditList } from '@/api/credit'

export default {
  components: { Pagination },
  data() {
    return {
      containerLoading: false,
      page: 1,
      userInfo: null,
      config,
      pageTotal: 0,
      userSelDepa: null,
      activityGrade: null,
      activityType: null,
      activityYear: null,
      activityTerm: null,
      searchAction: 'user_id',
      searchContext: null,

      props: {
        value: 'label',
        children: 'cities'
      },
      studentList: [],
      yearTermOptions: []
    }
  },
  created() {
    this.userInfo = this.$store.getters.userInfo
    this.genTermOptions()
    this.getList()
  },
  methods: {
    getList(data) {
      this.containerLoading = true

      const _page = data && data.page || this.page
      const params = { page: _page.toString(), size: '10' }

      getCreditList(this.genParams(params))
        .then(res => {
          this.studentList = res.data
          this.pageTotal = res.total
        })
        .catch(() => {})
        .finally(() => {
          this.containerLoading = false
        })
    },
    genParams(data) {
      // 增加筛选参数
      if (this.userSelDepa) {
        data.depa = this.userSelDepa.toString()
      }
      if (this.activityGrade) {
        data.grade = this.activityGrade.toString()
      }
      if (this.searchContext) {
        data[this.searchAction] = this.searchContext
      }

      return data
    },
    exportCreditExcel() {
      const params = []
      // 增加筛选参数
      if (this.userSelDepa) {
        params.push(`depa=${this.userSelDepa.toString()}`)
      }
      if (this.activityGrade) {
        params.push(`grade=${this.activityGrade.toString()}`)
      }
      if (this.searchContext) {
        params.push(`${this.searchAction}=${this.searchContext}`)
      }
      if (this.activityTerm) {
        params.push(`year=${this.activityTerm[0]}`)
        params.push(`term=${this.activityTerm[1]}`)
      }

      const search = params.join('&')
      // 创建隐藏的可下载链接
      var eleLink = document.createElement('a')
      eleLink.target = '_blank'
      eleLink.href = `/api/score/sel_scorExport.zepc?${search}`
      // 触发点击
      document.body.appendChild(eleLink)
      eleLink.click()
      // 然后移除
      document.body.removeChild(eleLink)
    },
    genTermOptions() {
      const termOptions = [{
        value: '1',
        label: '第一学期'
      }, {
        value: '2',
        label: '第二学期'
      }]

      config.activityYearOptions.forEach(i => {
        this.yearTermOptions.push({
          value: i.value,
          label: i.value,
          children: [...termOptions]
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.descCount {
  font-size: 14px;
  color: #5e6d82;
  margin: 0;
  span {
    color: red;
  }
}
.name-search {
  width: 280px;
  margin-bottom: 10px;
  vertical-align: middle;
  .el-select {
  width: 80px;
}
}
@media screen and (max-width: 370px) {
  .pagination-container.hidden-sm-and-up {
    padding: 0;
  }
}
</style>
